<template>
  <!-- 添加或修改配置对话框 -->
  <el-dialog :title="title" v-model="open" width="80%" append-to-body>
    <el-row :gutter="20">
      <el-col :span="3" class="left-layout">
        <Tree @handleNodeClick="handleNodeClick" title="成果目录" :treeList="treeList"/>
      </el-col>
      <el-col :span="15" class="left-layout">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="changeTab">
            <el-tab-pane label="基本信息" name="first">
              <el-form-item label="标签" prop="label">
                <el-input v-model="form.label" placeholder="请输入标签"/>
              </el-form-item>
              <el-form-item label="服务名称" prop="address">
                <el-input v-model="form.serviceName" placeholder="请输入服务名称"/>
              </el-form-item>
              <el-form-item prop="addressType" label="地址类型">
                <el-select
                  v-model="form.addressType"
                  placeholder="请选择地址类型"
                  clearable
                  style="width: 200px"
                >
                  <el-option label="离线地址" value="0"/>
                  <el-option label="在线地址" value="1"/>
                </el-select>
              </el-form-item>
              <el-form-item label="坐标" prop="coordinate">
                <el-input v-model="form.coordinate" placeholder="请输入坐标"/>
              </el-form-item>
              <el-form-item label="图片url" prop="imageUrl">
                <el-input v-model="form.imageUrl" placeholder="请输入图片url"/>
              </el-form-item>
              <el-form-item label="视频url" prop="videoUrl">
                <el-input v-model="form.videoUrl" placeholder="请输入视频url"/>
              </el-form-item>
              <el-form-item label="备注" prop="memo">
                <el-input v-model="form.memo" placeholder="请输入备注"/>
              </el-form-item>
              <el-form-item label="上传" prop="num">
                <Upload
                  :limit="1"
                  :fileSize="150"
                  :value="files"
                  :fileType="fileType"
                  :isShowTip="true"
                  @modelValue="modelValue"
                ></Upload>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="信息2" name="second">
              <el-form-item label="hobby" prop="checkList">
                <el-checkbox-group v-model="hobbyArr" class="menu-group">
                  <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="city" prop="checkList">
                <div class="checkList">
                  <!-- <span>复选数据2:</span> -->
                  <el-checkbox-group v-model="cityArr" class="menu-group">
                    <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-form-item>
              <el-form-item label="单选" prop="radio">
                <el-radio-group v-model="form.radio">
                  <el-radio :label="1">Option A</el-radio>
                  <el-radio :label="2">Option B</el-radio>
                  <el-radio :label="3">Option C</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="选取方式" prop="mode">
                <el-radio-group v-model="form.mode">
                  <el-radio-button
                    v-for="item in type"
                    :key="item"
                    :label="item"
                    @change="handleChange(item)"
                  >{{ item }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="中介机构" prop="type" v-if="ShowFlag == 1">
                <el-button type="primary">选取中介</el-button>
              </el-form-item>
              <el-form-item label="中介机构" prop="type2" v-if="ShowFlag == 2">
                <el-button type="primary">随机选取</el-button>
              </el-form-item>
              <el-form-item label="中介机构" prop="type3" v-if="ShowFlag == 3">
                <el-button type="info">公开竞价</el-button>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="信息3" name="third">
              <el-form-item label="选择时间" prop="Date">
                <el-date-picker
                  v-model="form.Date"
                  type="daterange"
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="选择起止日期及时间" prop="date">
                <el-date-picker
                  v-model="form.date"
                  type="datetimerange"
                  range-separator="~"
                  start-placeholder="开始时间及日期"
                  end-placeholder="结束时间及日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="选择日期及时间" prop="time">
                <el-date-picker v-model="form.time" type="datetime" placeholder="选择日期时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="数字" prop="num">
                <el-input-number v-model="form.num" :min="1" :max="10"/>
              </el-form-item>
              <el-form-item label="富文本" prop="num">
                <wangEditor :min-height="152" v-model="form.noticeContent" @on-change="changeVal"/>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="树组件" name="fiveth">
              <SeniorTree @handleNodeClick="handleNodeClick" :treeList="treeList"/>
            </el-tab-pane>
            <el-tab-pane label="多表组件" name="sixth">
              <dcList ref="dbList" @dcList="dcList" :tableData="tableData"/>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </el-col>
      <el-col :span="6">
        <div class="map-default-container">
          <img src="@/assets/images/map.png" alt>
        </div>
      </el-col>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm" v-if="isType!='details'">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
//API接口
import api from "@/api";
//引入消息弹出框
import { ElMessage, ElMessageBox } from "element-plus";
//把数据格式化tree格式数据
import formatTree from "@/utils/formatTree";
//上传组件
import Upload from "@/components/FileUpload/index.vue";
//富文本组件
import wangEditor from "@/components/wangEditor/index.vue";
//标题组件
import sunTitle from "@/components/Title/subTitle.vue";
//组件
import Tree from "@/components/Tree/Tree.vue";
import SeniorTree from "@/components/Tree/seniorTree.vue";
import dcList from "./dcList";

export default {
  components: {
    Upload,
    wangEditor,
    sunTitle,
    Tree,
    SeniorTree,
    dcList
  },
  props: {
    formObj: {
      type: Object,
      default() {
        return {};
      }
    },
    isType: {
      type: String
    }
  },
  data() {
    return {
      //上传文件类型
      fileType: [
        "jpeg",
        "jpg",
        "png",
        "gif",
        "pdf",
        "doc",
        "docx",
        "txt",
        "zip"
      ],
      //tab切换默认选中第一个
      activeName: "first",

      cities: ["Shanghai", "Beijing", "Shenzhen"],
      type: ["直接选取", "随机选取", "公开竞价"],
      //表单验证
      form: {
        check: [],
        noticeContent: "",
        tableData: [],

        hobby: "", // 复选框--爱好
        wantgoaddress: "" // 复选框--城市
      },
      files: "",
      open: false, //表单状态
      title: "", //表单标题
      //复选框
      hobbyArr: [],
      cityArr: [],
      treeList: [], //树列表
      tableData: [],
      isShow: true, //详情页面确定按钮隐藏
      ShowFlag: undefined, //组件状态
      rules: {
        label: [
          {
            required: true,
            message: "标签不能为空",
            trigger: "blur"
          }
        ]
      } //表单验证
    };
  },
  watch: {
    formObj: {
      handler(newVal, oldVal) {
        this.form = newVal;
        //上传回显
        this.files = newVal.imageUrl;
        if (newVal.hobby || newVal.wantgoaddress) {
          // 复选框回显 ["shenzhen","shanghai","beijing"]
          this.hobbyArr = this.format(newVal.hobby);
          this.cityArr = this.format(newVal.wantgoaddress);
        }
      },
      immediate: true,
      deep: true
    }
  },
  /**
   * 挂载函数
   */
  mounted() {
    this.getTreeList();
  },
  methods: {
    /**tab切换 */
    changeTab(val) {
      if (val.props.label == "多表组件") {
        this.dcList();
      }
    },
    dcList() {
      //调用列表查询接口
      api.assetCatalog.list(this.$refs.dbList.queryParams).then(res => {
        //判断返回状态
        if (res.code) {
          //设置列表数据
          this.tableData = res.rows;
          //设置总条目数
          this.$refs.dbList.total = res.total;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    /**复选框数据为空显示 */
    format(val) {
      return val ? val.split(",") : [];
    },
    /**
     * 获取tree列表
     */
    async getTreeList() {
      //调用列表查询接口
      api.assetCatalog
        .treeList()
        .then(res => {
          this.treeList = formatTree(res.data, 0);
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    /**
     * 点击Tree节点
     * @param {Object} node
     */
    async handleNodeClick(node) {
      //设置PID值
      this.queryParams.pid = node.id;
    },
    /**切换显示不同组件 */
    handleChange(val) {
      if (val == "直接选取") {
        this.ShowFlag = 1;
      } else if (val == "随机选取") {
        this.ShowFlag = 2;
      } else if (val == "公开竞价") {
        this.ShowFlag = 3;
      }
    },
    /**
     * 富文本数据
     */
    changeVal(list) {
      this.form.noticeContent = list.html;
    },
    /**
     * 上传数据
     */
    modelValue(list) {
      list.map(item => {
        this.form.fileList = item.url;
      });
    },
    /**
     * 多表数据
     */
    tableData(list) {
      let index = "";
      for (let i = 0; i < list.length; i++) {
        if (list[i] == undefined) {
          index = i;
          list.splice(index, 1);
        }
      }
      this.form.tableData = list;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["formRef"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            // 复选框参数数据类型转换 "shenzhen , shanghai , beijing"
            this.form.hobby = this.hobbyArr.toString();
            this.form.wantgoaddress = this.cityArr.toString();

            api.assetCatalog
              .edit(this.form)
              .then(res => {
                if (res.code) {
                  //弹出提示
                  ElMessage({
                    type: "success",
                    message: res.msg
                  });
                  this.open = false;
                  this.$emit("getList");
                }
              })
              .catch(err => {
                ElMessage({
                  type: "error",
                  message: err.msg
                });
              });
          } else {
            // 复选框参数数据类型转换 "shenzhen , shanghai , beijing"
            this.form.hobby = this.hobbyArr.toString();
            this.form.wantgoaddress = this.cityArr.toString();
            api.assetCatalog
              .add(this.form)
              .then(res => {
                if (res.code) {
                  //弹出提示
                  ElMessage({
                    type: "success",
                    message: res.msg
                  });
                  this.open = false;
                  this.$refs.formRef.resetFields();
                  this.$emit("getList");
                }
              })
              .catch(err => {
                ElMessage({
                  type: "error",
                  message: err.msg
                });
              });
          }
        }
      });
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.$refs.formRef.resetFields();
    }
  }
};
</script>

<style lang="less" scoped>
:deep(.el-tabs__nav-scroll) {
  padding: 0 20px;
}
:deep(.el-tabs__content) {
  height: 560px;
  overflow-y: scroll;
}
</style>
